import React from "react";
import clsx from "clsx";

export const ActiveItemBackground = ({ active }: { active?: boolean }) => {
    return (
        <div
            className={clsx(
                "re-absolute",
                "re-left-0",
                "re-top-0",
                "re-h-full",
                "re-w-full",
                active ? "re-scale-100" : "re-scale-0",
                "re-transition-all",
                "re-duration-300",
                "re-ease-[cubic-bezier(.25,.75,.5,1.25)]",
            )}
            style={{
                background:
                    "url(https://refine.ams3.cdn.digitaloceanspaces.com/devtools/active-background-icon.png)",
                backgroundSize: "36px 36px",
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat",
            }}
        />
    );
};
